<div class="main-container">
  <div class="row">
    <div fGrid="6" class="free-demo-board">
      <p>
        {{'DEMO.ACCORDION.DESCRIPTION' | translate}}
      </p>
      <hr>
      <h3 class="free-head-title">{{'API-OPTION' | translate}}<span class="symbol component"></span></h3>
      <div class="free-demo-row">
        <h3 class="free-title">free-accordion-group</h3>
        <p>{{'DEMO.ACCORDION.GROUP' | translate}}</p>
        <free-table>
          <free-table-header>
            <free-table-row>
              <free-table-head><ng-template>{{'PROPERTY' | translate}}</ng-template></free-table-head>
              <free-table-head><ng-template>{{'TYPE' | translate}}</ng-template></free-table-head>
              <free-table-head><ng-template>{{'DESCRIPTION' | translate}}</ng-template></free-table-head>
            </free-table-row>
          </free-table-header>
          <free-table-body>
            <free-table-row>
              <free-table-cell>closeOthers</free-table-cell>
              <free-table-cell>
                <ng-template><code>Boolean</code></ng-template>
              </free-table-cell>
              <free-table-cell>
                <ng-template>{{'DEMO.ACCORDION.OPTION.0' | translate}}</ng-template>
              </free-table-cell>
            </free-table-row>
            <free-table-row>
              <free-table-cell>styleClass</free-table-cell>
              <free-table-cell>
                <ng-template><code>String</code></ng-template>
              </free-table-cell>
              <free-table-cell>
                <ng-template>{{'DEMO.ACCORDION.OPTION.1' | translate}}</ng-template>
              </free-table-cell>
            </free-table-row>
          </free-table-body>
        </free-table>
      </div>
      <div class="free-demo-row">
        <h3 class="free-title">free-accordion</h3>
        <p>{{'COMPONENT.ACCORDION' | translate}}</p>
        <free-table>
          <free-table-header>
            <free-table-row>
              <free-table-head><ng-template>{{'PROPERTY' | translate}}</ng-template></free-table-head>
              <free-table-head><ng-template>{{'TYPE' | translate}}</ng-template></free-table-head>
              <free-table-head><ng-template>{{'DESCRIPTION' | translate}}</ng-template></free-table-head>
            </free-table-row>
          </free-table-header>

          <free-table-body>
            <free-table-row>
              <free-table-cell>header</free-table-cell>
              <free-table-cell>
                <ng-template><code>String</code></ng-template>
              </free-table-cell>
              <free-table-cell>
                <ng-template>{{'DEMO.ACCORDION.OPTION.2' | translate}}</ng-template>
              </free-table-cell>
            </free-table-row>
            <free-table-row>
              <free-table-cell>selected</free-table-cell>
              <free-table-cell>
                <ng-template><code>Boolean</code></ng-template>
              </free-table-cell>
              <free-table-cell>
                <ng-template>{{'DEMO.ACCORDION.OPTION.3' | translate}}</ng-template>
              </free-table-cell>
            </free-table-row>
            <free-table-row>
              <free-table-cell>disabled</free-table-cell>
              <free-table-cell>
                <ng-template><code>Boolean</code></ng-template>
              </free-table-cell>
              <free-table-cell>
                <ng-template>{{'DEMO.ACCORDION.OPTION.4' | translate}}</ng-template>
              </free-table-cell>
            </free-table-row>
          </free-table-body>
        </free-table>
      </div>
    </div>

    <div class="free-demo-board" fGrid="6">
      <div class="free-card-board">
        <h3 class="free-toolbar">Import</h3>
        <free-tab-group direction="right" theme="line">
          <free-tab header="CODE">
            <free-code lang="typescript">
              import &#123;AccordionModule&#125; from 'freeng/freeng';
            </free-code>
          </free-tab>
        </free-tab-group>
      </div>

      <div class="free-card-board">
        <h3 class="free-toolbar">Default</h3>
        <free-tab-group direction="right" theme="line">
          <free-tab header="PREVIEW">
            <free-accordion-group>
              <free-accordion header="Item 1">
                Item 1 content.
              </free-accordion>
              <free-accordion header="Item 2">
                Item 2 content.
              </free-accordion>
              <free-accordion header="Item 3">
                Item 3 content.
              </free-accordion>
            </free-accordion-group>
          </free-tab>
          <free-tab header="CODE">
            <free-code lang="html">
              &lt;free-accordion-group&gt;
                &lt;free-accordion header="Item 1"&gt;
                  Item 1 content.
                &lt;/free-accordion&gt;
                &lt;free-accordion header="Item 2"&gt;
                  Item 2 content.
                &lt;/free-accordion&gt;
                &lt;free-accordion header="Item 3"&gt;
                  Item 3 content.
                &lt;/free-accordion&gt;
              &lt;/free-accordion-group&gt;
            </free-code>
          </free-tab>
        </free-tab-group>
      </div>

      <div class="free-card-board">
        <h3 class="free-toolbar">closeOthers</h3>
        <free-tab-group direction="right" theme="line">
          <free-tab header="PREVIEW">
            <free-accordion-group [closeOthers]="true">
              <free-accordion header="Item 1">
                Item 1 content.
              </free-accordion>
              <free-accordion header="Item 2">
                Item 2 content.
              </free-accordion>
              <free-accordion header="Item 3">
                Item 3 content.
              </free-accordion>
            </free-accordion-group>
          </free-tab>
          <free-tab header="CODE">
            <free-code lang="html">
              &lt;free-accordion-group [closeOthers]="true"&gt;
                &lt;free-accordion header="Item 1"&gt;
                  Item 1 content.
                &lt;/free-accordion&gt;
                &lt;free-accordion header="Item 2"&gt;
                  Item 2 content.
                &lt;/free-accordion&gt;
                &lt;free-accordion header="Item 3"&gt;
                  Item 3 content.
                &lt;/free-accordion&gt;
              &lt;/free-accordion-group&gt;
            </free-code>
          </free-tab>
        </free-tab-group>
      </div>

      <div class="free-card-board">
        <h3 class="free-toolbar">selected</h3>
        <free-tab-group direction="right" theme="line">
          <free-tab header="PREVIEW">
            <free-accordion-group [closeOthers]="true">
              <free-accordion header="Item 1">
                Item 1 content.
              </free-accordion>
              <free-accordion header="Item 2" [selected]="true">
                Item 2 content.
              </free-accordion>
              <free-accordion header="Item 3">
                Item 3 content.
              </free-accordion>
            </free-accordion-group>
          </free-tab>
          <free-tab header="CODE">
            <free-code lang="html">
              &lt;free-accordion-group [closeOthers]="true"&gt;
              &lt;free-accordion header="Item 1"&gt;
              Item 1 content.
              &lt;/free-accordion&gt;
              &lt;free-accordion header="Item 2" [selected]="true"&gt;
              Item 2 content.
              &lt;/free-accordion&gt;
              &lt;free-accordion header="Item 3"&gt;
              Item 3 content.
              &lt;/free-accordion&gt;
              &lt;/free-accordion-group&gt;
            </free-code>
          </free-tab>
        </free-tab-group>
      </div>

      <div class="free-card-board">
        <h3 class="free-toolbar">disabled</h3>
        <free-tab-group direction="right" theme="line">
          <free-tab header="PREVIEW">
            <free-accordion-group [closeOthers]="true">
              <free-accordion header="Item 1">
                Item 1 content.
              </free-accordion>
              <free-accordion header="Item 2" [disabled]="true">
                Item 2 content.
              </free-accordion>
              <free-accordion header="Item 3">
                Item 3 content.
              </free-accordion>
            </free-accordion-group>
          </free-tab>
          <free-tab header="CODE">
            <free-code lang="html">
              &lt;free-accordion-group [closeOthers]="true"&gt;
              &lt;free-accordion header="Item 1"&gt;
              Item 1 content.
              &lt;/free-accordion&gt;
              &lt;free-accordion header="Item 2" [disabled]="true"&gt;
              Item 2 content.
              &lt;/free-accordion&gt;
              &lt;free-accordion header="Item 3"&gt;
              Item 3 content.
              &lt;/free-accordion&gt;
              &lt;/free-accordion-group&gt;
            </free-code>
          </free-tab>
        </free-tab-group>
      </div>

      <div class="free-card-board">
        <h3 class="free-toolbar">Custom Style</h3>
        <free-tab-group direction="right" theme="line">
          <free-tab header="PREVIEW">
            <free-accordion-group [closeOthers]="true" [styleClass]="'blueHeader'">
              <free-accordion header="Item 1">
                Item 1 content.
              </free-accordion>
              <free-accordion header="Item 2">
                Item 2 content.
              </free-accordion>
              <free-accordion header="Item 3">
                Item 3 content.
              </free-accordion>
            </free-accordion-group>
          </free-tab>
          <free-tab header="CODE">
            <free-code lang="html">
              &lt;free-accordion-group [closeOthers]="true" [styleClass]="'blueHeader'"&gt;
              &lt;free-accordion header="Item 1"&gt;
              Item 1 content.
              &lt;/free-accordion&gt;
              &lt;free-accordion header="Item 2"&gt;
              Item 2 content.
              &lt;/free-accordion&gt;
              &lt;free-accordion header="Item 3"&gt;
              Item 3 content.
              &lt;/free-accordion&gt;
              &lt;/free-accordion-group&gt;
            </free-code>
            <h4>Style</h4>
            <free-code lange="css">
              // Scss
              ::ng-deep .blueHeader &#123;
                .accordion-toggle &#123;
                  background: #1976d2;
                  color: #fff;

                  &:hover &#123;
                    color: #fff;
                  &#125;
                &#125;
                .accordion-item-expand.accordion-toggle &#123;
                  color: #fff !important;
                &#125;
              &#125;
            </free-code>
          </free-tab>
        </free-tab-group>
      </div>
    </div>

  </div>
  <blockquote>FreeNG - {{'MOTTO' | translate}}</blockquote>
</div>
